import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { RING_COLORS, tooltip } from './constants';
/**
 * props
 * height: 图表高度
 */

function RingChart(props) {
  const { data, image = {} } = props;
  // eslint-disable-next-line react/destructuring-assignment
  const colors = props.colors || RING_COLORS;
  const max = data.reduce((pre, cur) => pre + cur.value, 0);
  const getOption = () => {
    const option = {
      graphic: {
        type: 'image',
        style: {
          image: image.url,
          width: image.width,
          height: image.height,
        },
        left: 'center',
        top: 'center',
      },
      title: {
        text: max,
        subtext: '站点总数',
        textStyle: {
          color: '#E2F8FF',
          fontSize: 25,
          align: 'center',
          fontFamily: 'DINMediumItalic',
          fontWeight: 'Italic',
          letterSpacing: '2.08px',
        },
        subtextStyle: {
          fontSize: 14,
          fontWeight: 400,
          color: ['#E6EFFF'],
        },
        x: 'center',
        y: 'center',
        top: '35%',
      },
      tooltip: {
        ...tooltip,
        trigger: 'item',
        formatter: '{b} : {c}个 ({d}%)',
        position: ['10%', '40%'],
      },
      // 渐变色
      color: colors.map((s) => {
        const cs = new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          { offset: 0, color: s.linearGradientFrom },
          { offset: 0.9, color: s.linearGradientTo },
        ]);
        return cs;
      }),

      series: [
        {
          type: 'pie',
          radius: ['66%', '80%'],
          avoidLabelOverlap: false,
          itemStyle: {
            // 环图间隙
            borderColor: '#0A1024',
            borderWidth: 3,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data,
        },
      ],
    };

    return option;
  };
  const { height, width } = props;
  const options = getOption();
  const percent_colors = ['#24DDFA', '#267FD3', '#F8C86B',]
  const total = data?.reduce((p, c) => p + c.value, 0)
  const renderList = () => data.map((s, index) => (
    <div key={s.name || index} className="type-leagle-item flex-row flex-item-center">
      <div className="flex-row flex-item-center">
        <div className="type-leagle-dot" style={{ background: percent_colors[index] }} />
        <div className="type-leagle-label">{s.name}</div>
      </div>
      <div className="type-leagle-value">{s.value}个 <span style={{ fontSize: 14, color: percent_colors[index] }}>{Math.round(s.value / total * 100)}%</span></div>
    </div>
  ));

  return (
    <div style={{ height: '100%' }} className="flex-column flex-item-center">
      <div className="type-chart-wrapper">
        <ReactEcharts
          option={options}
          notMerge
          lazyUpdate
          style={{ height: height || '174px', margin: '0', width: width || 'auto' }}
        />
      </div>
      <div className="type-leagle-wrapper flex-row flex-content-between">
        {renderList()}
      </div>
    </div>
  );
}

export default RingChart;
